<template>
	<div class="header">
		<Scroll class="wrapper"> 
			<div>
				<!--闭关修炼-->
				<div>
				<div class="Purchase"  v-for="item in tuijian">
					<div class="Purchase-left">
						<h3>闭关修炼</h3>
						<span class="redGo">Go</span>
						<br />
						<span class="Imagecenter">
							</a><img :src="item.tu1"/>
						</span>
						
					</div>
					<div class="Purchasetop-right">
						<div class="topright">
							<span class="rightleft-font">
								<h3>潮逼格</h3>
								<span class="redGotwo">Go</span>
							</span>
							<img :src="item.tu2"/>
						</div>
						<div class="bottmright">
							<span class="rightleft-font">
								<h3>必买清单</h3>
								<span class="redGotwo">Go</span>
							</span>
							<!--<br />-->
							<img :src="item.tu3"/>
						</div>
					</div>
				</div>
				</div>
				<div class="Thesale">
					<div class="Thesaletitle">
						<h2 class="sale">即将开售</h2>
						<div class="Beautymakeup">
							<span class="leftline"></span>
							美妆专区
							<span class="rightline"></span>
						</div>
					</div>
					<ul class="Beautymakeup-ul">
						<li v-for="item in shangpin1" class="productfast">
							<span class="single">
								<img src="../../../static/F-img/热品.png" class="redfast"/>
								<img :src="item.urls" alt="" class="Thepicture" />
								<h3>{{item.name}}</h3>
							</span>
							<h3 class="action">即将开始</h3>
							<h3 class="action">倒计时: <em>00</em>时<em>00</em>分<em>00</em>秒</h3>
						</li>
					</ul>
					
					<!--美食专区-->
					<div class="Thesaletitle">
						<div class="Beautymakeup">
							<span class="leftline"></span>
							美食专区
							<span class="rightline"></span>
						</div>
					</div>
					<ul class="Beautymakeup-ul">
						<li v-for="item in shangpin2" class="productfast">
							<span class="single">
								<img src="../../../static/F-img/热品.png" class="redfast"/>
								<img :src="item.urls" alt="" class="Thepicture" />
								<h3>{{item.name}}</h3>
							</span>
							<h3 class="action">即将开始</h3>
							<h3 class="action">倒计时: <em>00</em>时<em>00</em>分<em>00</em>秒</h3>
						</li>
					</ul>
				</div>
				<h3 class="loade">加载更多</h3>
			</div>
		</Scroll>
	</div>
</template>

<script>
	import Scroll from "../../../base/Scroll"
	export default{
		name:"thiefwas",
		data(){
			return{
				tuijian:{},
				shangpin1:[],
				shangpin2:[]
				
			}
		},
		components:{
			Scroll
		},
		created:function(){
			this.axios.post("/api/zeidianji").then(function  (data) {
				this.tuijian=data.data.tuijian;
				this.shangpin1=data.data.shangpin1;
				this.shangpin2 = data.data.shangpin2;
			}.bind(this));
		}
	}
</script>

<style scoped="scoped">
	.wrapper{
		overflow: hidden;
		height: 80vh;
	}
	.header{
		background-color: #efefef;
	}
	.Purchase{
		width: 100%;
		background-color: white;
		margin-bottom: 1rem;
		font-size: 0;
		/*border: 1px solid red;*/
	}
	/***/
	.Purchase-left{
		width: 40%;
		border-right: 0.1rem solid #c1c1c1;
		display: inline-block;
		margin-top: 0.6rem;
		margin-left: 1rem;
		margin-bottom: 0.6rem;
		
		
	}
	.Purchase-left h3{
		font-size: 1.3rem;
		color: #d72532;
		font-weight: 400;
		text-align: left;
	}
	.redGo{
		width: 25%;
		height: 2rem;
		background-color: #d72532;
		display: inline-block;
		text-align: center;
		color: white;
		font-size: 1.2rem;
		line-height: 2rem;
		margin-top: 0.2rem;
	}
	.redGotwo{
		width: 45%;
		height: 2rem;
		background-color: #d72532;
		display: inline-block;
		text-align: center;
		color: white;
		font-size: 1.2rem;
		line-height: 2rem;
		margin-top: 0.2rem;
	}
	.Purchase-left img{
		width: 80%;
		height: 10rem;
		text-align: center;
	}
	.Imagecenter{
		width: 40vw;
		text-align: center;
		display: inline-block;
	}
	.Purchasetop-right{
		width: 54%;
		display: inline-block;
		margin-left: 0.2rem;
	}
	.rightleft-font{
		display: inline-block;
		width: 40%;
		vertical-align: top;
	}
	.rightleft-font h3{
		font-size: 1.3rem;
		color: #d72532;
		font-weight: 400;
		text-align: left;
	}
	.topright{
		border-bottom: 1px solid #c1c1c1;
	}
	.topright img{
		width: 7.5rem;
		height: 6rem;
		margin-top: 0.8rem;
	}
	.bottmright img{
		width: 7.5rem;
		height: 6rem;
		margin-top: 0.7rem;
	}
	.Thesale{
		background-color: white;
	}
	.Thesaletitle{
		text-align: center;
	}
	.sale{
		font-size: 1.8rem;
		color: #d72533;
		font-weight: 500;
		margin-bottom: 0.5rem;
		padding-top: 0.5rem;
	}
	.leftline,.rightline{
		width: 20%;
		height: 0.1rem;
		border-top: 1px solid #c1c1c1;
		display: inline-block;
		vertical-align: middle;
		
	}
	.Beautymakeup{
		font-size: 1.5rem;
		font-weight: 200;
	}
	.productfast{
		width: 30%;
		margin-bottom: 2rem;
	}
	.redfast{
		width: 20%;
		height: 3.2rem;
		display: inline-block;
		vertical-align: top;
	}
	.Beautymakeup-ul{
		margin-top: 0.5rem;
		width: 100%;
		margin: 0 auto;
	}
	.Beautymakeup-ul li{
		display: inline-block;
		margin-left: 2.5%;
		vertical-align: top;
		
	}
	.Thepicture{
		width: 40%;
		height: 10vh;
		margin-top: 1.8rem;
		margin-left: 12%;
	}
	.single{
		width: 100%;
		border: 1px solid #c1c1c1;
		display: inline-block;
		margin-bottom: 0.5rem;
		margin-top: 0.5rem;
		
	}
	.single h3{
		font-size: 1rem;
		margin-top: 0.2rem;
		text-align: center;
		font-weight: 400;
		color: #3d3d3d;
		margin-bottom: 0.5rem;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	.action{
		font-size: 1rem;
		font-weight: 500;
	}
	.action em{
		font-style: normal;
		color: #d72533;
	}
	.loade{
		text-align: center;
		padding-top: 1rem;
		font-size: 1.2rem;
		padding-bottom: 2rem;
		font-weight: 400;
		color: #767676;
	}
</style>